<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { message } from 'ant-design-vue';
import LoginComp from './Login.vue'
import {getLingjiQrcode, checkLingjiQrcode, getUser, getLives} from '@/api'

const user = ref(getUser());

const params = ref({
  status: '0',
  page: 1,
  limit: 99,
});

const data = ref({
  page: 1,
  list: [],
  count: 0
})

const columns: any = [
  {
    title: 'ID',
    dataIndex: 'id',
    wdith: 60
  },
  {
    title: '任务名',
    dataIndex: 'name',
  },
  {
    title: '操作',
    key: 'control',
    wdith: 90
  },
]

const loginVisible = ref(false);
const onLogin = () => {
  loginVisible.value = true;
}
const onLoginClose = () => {
  loginVisible.value = false;
  getData(params.value);
  user.value = getUser();
}

const onTab = () => {
  params.value.page = 1;
  getData(params.value);
};

const getData = async(params: any) => {
  const res = await getLives(params)
  if (res.code === 200) {
    data.value = res.data;
  }
}

const onRefresh = () => {
  getData(params.value)
}

const authVisible = ref(false);
const authId = ref(0);
const authData: any = ref({});

const onAuth = async(id: number) => {
  authVisible.value = true;
  authId.value = id;
  const res = await getLingjiQrcode();
  authData.value = res.data;
  setTimeout(() => {
    startLingjiQrcodeTimer();
  }, 2000)
};

let lingjiQrcodeTimer: any = null;
const startLingjiQrcodeTimer = async() => {
  clearTimeout(lingjiQrcodeTimer);
  onLingjiQrcodeCheck(authId.value, authData.value.token);
  lingjiQrcodeTimer = setTimeout(() => {
    startLingjiQrcodeTimer();
  }, 2000);
};

const onLingjiQrcodeCheck = async(id: number, token: string) => {
  const res = await checkLingjiQrcode({id, token});
  if (res.data.status === '5') {
    authData.value = res.data;
  } else if (res.data.status === '3') {
    clearTimeout(lingjiQrcodeTimer);
    getData(params.value);
    setTimeout(() => {
      authVisible.value = false;
    }, 2000);
    message.success('授权成功，请刷新后台')
  }
  authData.value.status = res.data.status;
};

const onLingjiQrcodeClose = () => {
  clearTimeout(lingjiQrcodeTimer);
};

onBeforeUnmount(() => {
  clearTimeout(lingjiQrcodeTimer);
});

onMounted(async() => {
  onRefresh()
})
</script>

<template>

  <div class="Page">
    <a-alert style="margin-bottom: 1rem" message="应用程序目前只为直播任务提供扫码授权功能，具体操作请在后台进行" type="info" />
    <div style="text-align: right;">
      {{ user.username }}&nbsp;&nbsp;
      <a-button size="small" @click="onLogin">{{ user.username ? '重新登录' : '登录' }}</a-button>
    </div>

    <a-tabs v-model:activeKey="params.status" @change="onTab">
      <a-tab-pane key="0" tab="待启动"></a-tab-pane>
      <a-tab-pane key="1" tab="执行中"></a-tab-pane>
      <template #rightExtra>
        <a-button size="small" @click="onRefresh" type="primary">刷新</a-button>
      </template>
    </a-tabs>

    <a-table :dataSource="data.list" :columns="columns" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'control'">
          <a-button size="small" @click="onAuth(record.id)">{{record.auth ? '重新授权' : '授权'}}</a-button>
        </template>
      </template>
    </a-table>
    <!-- <img :src="`data:image/jpeg;base64,${qrcode}`" alt=""> -->
  </div>

  <LoginComp :visible="loginVisible" @close="onLoginClose"/>

  <a-modal
  v-model:open="authVisible"
  width="300px"
  :footer="null"
  @cancel="onLingjiQrcodeClose"
  title="开播抖音号授权">
    <div class="lingji-qrcode">
      <img style="width: 100%" :src="`data:image/jpeg;base64,${authData.qrcode}`" alt="">
      <div v-if="authData.status === '2'" class="mask">扫码成功</div>
      <div v-else-if="authData.status === '3'" class="mask">授权成功</div>
    </div>
  </a-modal>
</template>

<style scoped>
.Page{
  padding: 1rem;
}
.lingji-qrcode{
  position: relative;
  .mask{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
    font-size: 16px;
  }
}
</style>
